<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>飞机大战游戏</title>
		<style type="text/css">
			#box{
				width: 512px;
				height: 536px;
				border: 1px solid red;
				background: url('../images/背景图.jpg') no-repeat 0px -5400px ;
				position: relative;
			}
			#img{
				position: absolute;
				margin-top: 400px;
				margin-left: 200px;
				
			}
			
		</style>
	</head>
	<body>
		<div id="box">
			<img src="../images/飞机.png" id="img">
		</div>
		<script type="text/javascript">
			var box = document.getElementById('box');
			var img = document.getElementById('img');
			let num = 0 ;
			var timer = setInterval(function(){//实现背景图移动
				num += 5;
				if(num == 5000){
					num = 0 ;
				}
				box.style.backgroundPosition ='0px ' +(-5400+num)+'px';
			},100);
			//实现飞机的移动
			window.document.onkeydown = function(e){
				var e = e || window.event;
				//console.log(e.keyCode);
				//37代表左  38代表上   39 代表右 40代表下
				//offsetTop 一个元素到父级的顶部距离（父级必须有position属性）
				
				if(e.keyCode == 37){
					let top =img.offsetLeft -10;
					
					 img.style.top = top+'px';
				}
				if(e.keyCode ==39){
					let top =img.offsetLeft +10;
					
					 img.style.top = top+'px';
				}
				
			}
		</script>
	</body>
</html>
